<template>
  <div class="app-list">
    <AppHeader back class="app-common__header">
      <template #title>
      <van-search
       v-model="searshValue"
        shape="round"
        background="#b83627"
        placeholder="搜索商品名称"
        @click="handleToSearsh()"
      />
      </template>
    </AppHeader>
    <SearshFliters :filters="filters"></SearshFliters>
    <!-- <CommonList :action="getFiltersListApi"></CommonList> -->
    <CommonList :action="isSearshWidthValue"/>
  </div>
</template>
<script setup lang="ts">
import store from 'store'
import { onMounted,computed } from 'vue';
import {useRoute,useRouter} from 'vue-router'
import AppHeader from '../AppLayout/AppHeader/index.vue'
import SearshFilters from '@/views/AppList/components/SearshFliters/index.vue'
import {ref,reactive,watchEffect} from 'vue'
import SearshFliters from './components/SearshFliters/index.vue'
import CommonList from '../../components/CommonList/index.vue'
import {getFiltersListApi} from '@/api/pro'
import type {ISearshFiltersparams,ISortAndFirst} from './server'
const route=useRoute()
const router=useRouter()
const filters:ISearshFiltersparams=reactive({
  sort:0,
  first:[0]
})
const searshValue=ref<string>(route.query.searsh as string||'')
  const isSearshWidthValue=computed<any>(()=>{
  return getFiltersListApi.bind(null,{
    sort:filters.sort,
    first:filters.first,
    keyword:searshValue.value,
    count:-1,
    limitNum:-1
  })
})
const handleSaveHistory=()=>{
  const searsh=store.get('history')||[]
  if(!route.query.searsh)return false
  if(!searsh.includes(route.query.searsh)){
   searsh.push(route.query.searsh)
   store.set('history',searsh)
  }
}
const handleToSearsh=()=>{
router.push({name:'searsh',query:{searsh:searshValue.value}})
}
onMounted(() => {
  handleSaveHistory()
})
// watchEffect(()=>{
//   console.log(filters.sort,filters.first,searshValue.value)
// })
</script>
<style lang="scss">
</style>